<template>
  <div class="header">
    <div class="logo"
         :class="{'active':isActive}">

    </div>
    <div class="navbar">
      <div class="nav-btn"
           :class="{'active':isActive}"
           @click="handsidebar">
        <span :class="menuBtn"></span>
      </div>
      <div class="navbar-menu">
        <el-menu class="el-menu-demo"
                 mode="horizontal">
          <el-menu-item index="1">网站设置</el-menu-item>
          <el-submenu index="2">
            <template slot="title">更新网站</template>
            <el-menu-item index="2-3">一键更新</el-menu-item>
            <el-menu-item index="2-1">更新缓存</el-menu-item>
            <el-menu-item index="2-2">更新主页</el-menu-item>
            <el-menu-item index="2-3">更新栏目</el-menu-item>
            <el-menu-item index="2-3">更新文章</el-menu-item>
          </el-submenu>
          <el-menu-item index="4"><a href="/"
               target="_blank">网站主页</a></el-menu-item>
          <el-menu-item index="3"
                        disabled>手机主页</el-menu-item>

        </el-menu>
      </div>
      <div class="navbar-menu-r">
        <el-menu class="el-menu-demo"
                 height='50px'
                 mode="horizontal">

          <el-submenu index="2">
            <template slot="title">
              <el-avatar :size="30"
                         :src="circleUrl"></el-avatar>{{username}}
            </template>
            <el-menu-item index="2-1">用户管理</el-menu-item>
            <el-menu-item index="2-2">修改密码</el-menu-item>
            <el-menu-item @click='exits()'
                          index="2-3">登出</el-menu-item>
          </el-submenu>

        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { exit } from '../../axios/api'
export default {
  data () {
    return {
      menuBtn: 'el-icon-s-fold icon',
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  computed: {
    ...mapState({
      username: state => state.user.username,
      isActive: state => state.app.sidebar.opened
    })

  },
  methods: {
    ...mapMutations({
      toggle_sidebar: 'TOGGLE_SIDEBAR'
    }),
    handsidebar () {
      console.log(this.toggle_sidebar)
      this.toggle_sidebar()
    },
    exits () {
      this.$confirm('确认退出当前账号？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        exit().then(res => {
          this.$message({
            type: 'success',
            message: '退出成功'
          })
          setTimeout(() => {
            this.$router.push('/login')
          }, 800)
        })
      }).catch(() => {
        this.$message('已取消')
      })
    }
  },
  mounted () {
    console.log(this.isActive)
  }
}
</script>

<style lang='less' scoped>
.header {
  padding: 0px 0px;
  .flex-block();
}
.logo {
  .transition(0.5s);
  white-space: nowrap;
  width: 220px;
  .tc;
  height: 60px;
  padding: 5px 0;
  .logo-txt {
    .dis-in;

    .flex(1);
  }
  img {
    .dis-in;
    height: 50px;
    width: auto;
  }
}
.navbar {
  .flex-block();
  .flex(1);
}
//按钮
.nav-btn {
  height: 60px;
  width: 60px;
  .transition(0.5s);
  line-height: 60px;
  cursor: pointer;
  .tc;
  .icon {
    font-size: 24px;
    line-height: 60px;
  }
}
.navbar-menu {
  .flex(1);
  .tl;
}
.navbar-menu-r {
  .tr;
}
.el-avatar {
  margin-right: 5px;
}
//当前状态
.logo.active {
  width: 64px;
}
.nav-btn.active {
  .rotateY(180deg);
}
</style>
